﻿@page
@{ Layout = "_Layout"; }

@section Styles{
    <link href="/sitefiles/assets/lib/geeks/css/theme.min.css" rel="stylesheet" type="text/css" />
    <style>
        body {
            padding: 0;
            margin: 0;
            background: #fafafa;
        }

        html {
            padding: 0;
            margin: 0;
            background: #fafafa;
        }
    </style>
}

<div class="p-3">
    <div>
        <el-form v-on:submit.native.prevent :inline="true" :model="form" :size="euiSize">
            <el-form-item label="时间：从">
                <el-date-picker v-model="form.dateFrom"
                                type="date"
                                value-format="yyyy-MM-ddTHH:mm:ss.000Z"
                                placeholder="选择开始日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="到">
                <el-date-picker v-model="form.dateTo"
                                type="date"
                                value-format="yyyy-MM-ddTHH:mm:ss.000Z"
                                placeholder="选择结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" v-on:click="btnSearchClick" icon="el-icon-search">查 询</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div class="row g-3" v-if="systemCode==='Elearning'">
        <div class="col-6">
            <el-card class="rounded-pill card-lift fw-bolder">
                <div class="d-flex justify-content-between align-items-center">
                    <span>总学分</span>
                    <span class="fw-bold">{{ totalCredit }}</span>
                </div>
            </el-card>
        </div>
        <div class="col-6">
            <el-card class="rounded-pill card-lift fw-bolder">
                <div class="d-flex justify-content-between align-items-center">
                    <span>总学时</span>
                    <span class="fw-bold">{{ utils.formatDuration(totalDuration) }}</span>
                </div>
            </el-card>
        </div>
        <div class="col-4">
            <el-card class="rounded-pill card-lift fw-bolder">
                <div class="d-flex justify-content-between align-items-center">
                    <span>总积分</span>
                    <span class="fw-bold">{{ totalPoints }}</span>
                </div>
            </el-card>
        </div>
        <div class="col-4">
            <el-card class="rounded-pill card-lift fw-bolder">
                <div class="d-flex justify-content-between align-items-center">
                    <span>登录次数</span>
                    <span class="fw-bold">{{ totalLogins }}</span>
                </div>
            </el-card>
        </div>
        <div class="col-4">
            <el-card class="rounded-pill card-lift fw-bolder">
                <div class="d-flex justify-content-between align-items-center">
                    <span>获得证书</span>
                    <span class="fw-bold">{{ totalCers }}</span>
                </div>
            </el-card>
        </div>
    </div>
     <div class="row g-3" v-else>
        <div class="col-4">
            <el-card class="rounded-pill card-lift fw-bolder">
                <div class="d-flex justify-content-between align-items-center">
                    <span>总积分</span>
                    <span class="fw-bold">{{ totalPoints }}</span>
                </div>
            </el-card>
        </div>
        <div class="col-4">
            <el-card class="rounded-pill card-lift fw-bolder">
                <div class="d-flex justify-content-between align-items-center">
                    <span>登录次数</span>
                    <span class="fw-bold">{{ totalLogins }}</span>
                </div>
            </el-card>
        </div>
        <div class="col-4">
            <el-card class="rounded-pill card-lift fw-bolder">
                <div class="d-flex justify-content-between align-items-center">
                    <span>获得证书</span>
                    <span class="fw-bold">{{ totalCers }}</span>
                </div>
            </el-card>
        </div>
    </div>
    <div class="mt-3">
        <div class="row g-3">
            <template v-if="systemCode==='Elearning'">
                <div class="col-4">
                <el-card class="rounded-5 card-lift">
                    <div class="text-center">
                        <span class="fw-bolder">全部任务：{{ planTotal }}</span>
                        <el-divider direction="vertical"></el-divider>
                        <span class="fw-bolder">完成任务：{{ planOverTotal }}</span>
                    </div>
                    <div>
                        <apexchart type="radialBar" :options="planOverChartOptions" :series="planOverSeries" height="299"></apexchart>
                    </div>
                </el-card>
                </div>
                <div class="col-4">
                    <el-card class="rounded-5 card-lift">
                        <div class="text-center">
                            <span class="fw-bolder">全部任务：{{ planTotal }}</span>
                            <el-divider direction="vertical"></el-divider>
                            <span class="fw-bolder">达标任务：{{ planDabiaoTotal }}</span>
                        </div>
                        <div>
                            <apexchart type="radialBar" :options="planDabiaoChartOptions" :series="planDabiaoSeries" height="299"></apexchart>
                        </div>
                    </el-card>
                </div>
                <div class="col-4">
                    <el-card class="rounded-5 card-lift">
                        <div class="text-center">
                            <span class="fw-bolder">在学课程：{{ courseTotal }}</span>
                            <el-divider direction="vertical"></el-divider>
                            <span class="fw-bolder">完成课程：{{ courseOverTotal }}</span>
                        </div>
                        <div>
                            <apexchart type="radialBar" :options="courseOverChartOptions" :series="courseOverSeries" height="299"></apexchart>
                        </div>
                    </el-card>
                </div>
            </template>
            <div class="col-6">
                <el-card class="rounded-5 card-lift">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <span class="fw-bolder">参加考试：{{ examTotal }}</span>
                            <el-divider direction="vertical"></el-divider>
                            <span class="fw-bolder">及格：{{ examPassTotal }}</span>
                        </div>
                        <div>
                            <el-progress type="circle" :percentage="utils.formatPercentFloat(examPassTotal,examTotal)" :stroke-width="10" color="#67C23A"></el-progress>
                        </div>
                    </div>
                </el-card>
            </div>
            <div class="col-6">
                <el-card class="rounded-5 card-lift">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <span class="fw-bolder">模拟考试：{{ examMoniTotal }}</span>
                            <el-divider direction="vertical"></el-divider>
                            <span class="fw-bolder">及格：{{ examMoinPasaTotal }}</span>
                        </div>
                        <div>
                            <el-progress type="circle" :percentage="utils.formatPercentFloat(examMoinPasaTotal,examMoniTotal)" :stroke-width="10" color="#67C23A"></el-progress>
                        </div>
                    </div>
                </el-card>
            </div>
            <div class="col-4">
                <el-card class="rounded-5 card-lift">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <span class="fw-bolder">问卷：{{ examQTotal }}</span>
                            <el-divider direction="vertical"></el-divider>
                            <span class="fw-bolder">已参与：{{ examQSubmitTotal }}</span>
                        </div>
                        <div>
                            <el-progress type="circle" :percentage="utils.formatPercentFloat(examQTotal,examQSubmitTotal)" :stroke-width="10" color="#67C23A"></el-progress>
                        </div>
                    </div>
                </el-card>
            </div>
            <div class="col-4">
                <el-card class="rounded-5 card-lift">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <span class="fw-bolder">测评：{{ examAssTotal }}</span>
                            <el-divider direction="vertical"></el-divider>
                            <span class="fw-bolder">已参与：{{ examAssSubmitTotal }}</span>
                        </div>
                        <div>
                            <el-progress type="circle" :percentage="utils.formatPercentFloat(examAssSubmitTotal,examAssTotal)" :stroke-width="10" color="#67C23A"></el-progress>
                        </div>
                    </div>
                </el-card>
            </div>
            <div class="col-4">
                <el-card class="rounded-5 card-lift">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <span class="fw-bolder">刷题：{{ examPracticeAnswerTotal }}</span>
                            <el-divider direction="vertical"></el-divider>
                            <span class="fw-bolder">正确：{{ examPracticeRightTotal }}</span>
                        </div>
                        <div>
                            <el-progress type="circle" :percentage="utils.formatPercentFloat(examPracticeRightTotal,examPracticeAnswerTotal)" :stroke-width="10" color="#67C23A"></el-progress>
                        </div>
                    </div>
                </el-card>
            </div>
        </div>
    </div>
</div>

@section Scripts{
<script src="/sitefiles/assets/lib/apexcharts/apexcharts.js" type="text/javascript"></script>
<script src="/sitefiles/assets/lib/apexcharts/vue-apexcharts.js" type="text/javascript"></script>
<script src="/sitefiles/assets/js/admin/common/userDocIndex.js" type="text/javascript"></script>
}
